<template>
  <div class="card">
    <div class="card-header flex justify-between">
      <span></span>
      <span class="ml-15">
        {{ title }}
      </span>
      <span>
        <button
          v-if="false"
          class="flex px-2 border-purple-400 rounded border"
          @click="isPreviewMode=!isPreviewMode">
          edit
        </button>
      </span>
    </div>
    <div class="card-body">
      <v-md-preview class="md-preview" v-if="isPreviewMode" :text="description"></v-md-preview>
      <mavon-editor
          v-else
          v-model="description"
          @save="saveAbout">
      </mavon-editor>
    </div>
  </div>
</template>

<script>
import Service from '@/services/Service.js';


export default {
  name: 'About',
  data() {
    return {
      title: 'About Us',
      description: '',
      isPreviewMode: true,
    };
  },
  created() {
    this.getAbout();
  },
  methods: {
    async saveAbout() {
      try{
        const res = await Service.updateAbout({
          description: this.description
        });
        console.log(res);
        this.$message.success("saved");
      } catch (e) {
        this.$message.error("failed to save");
        console.log(e);
      }
    },
    async getAbout() {
      const res = await Service.getAbout();
      this.description = res.data.about.description;
    }
  },
};
</script>

<style scoped>
.md-preview {
  text-align: start;
}
</style>
